<template>
  <div id="account">
    <h2>{{userName}}</h2>
    <a-menu v-model="current" mode="horizontal" class="pag-menu" >
      <a-menu-item key="1">Profile</a-menu-item>
      <a-menu-item key="2">Authentication</a-menu-item>
      <a-menu-item key="3">API</a-menu-item>
      <a-menu-item key="4">User</a-menu-item>
      <a-menu-item key="5">Notifications</a-menu-item>
    </a-menu>
    <Profile v-if="current[0] === '1'" />
    <Auth v-if="current[0] === '2'" />
    <Ntfc v-if="current[0] === '5'" />
  </div>
</template>
<script>
  import Profile from './Account/Profile'
  import Auth from './Account/Auth'
  import Ntfc from './Account/Ntfc'
  export default {
    name: 'Account',
    props: ['userName'],
    data() {
      return {
        current: ['1'],
      };
    },
    components: {
      Profile,
      Auth,
      Ntfc,
    },
    methods: {
    },
  };
</script>

<style>
  #account {
    padding: 0;
    margin: 0;
  }
  #account h2 {
    margin: 20px 0 0 0;
    padding: 0 50px;
    font-size: 40px;
  }
  #account .pag-menu {
    margin: 20px 0 0 0;
    padding: 0 30px;
    border-bottom: 3px solid #e8e8e8;
    font-size: 20px;
  }
</style>
